<template>
  <div class="about">
    <!-- <YearMonthWeekPicker :years="[2018,2019,2020,2021]" :year="2017" :month="5" :week="3" :beginDay="6" :availableFromDate="new Date(2019,7,15)" :availableToDate="new Date(2022,7,15)"></YearMonthWeekPicker> -->

    <!-- <YearMonthWeekRangePicker :availableFromDate="new Date(2021,0,30)"  :availableToDate="new Date(2021,5,18)"></YearMonthWeekRangePicker> -->

    <!-- <complexSearch :showComponents="mapper[$route.query.id]||[]" @submit="submit"></complexSearch> -->

    <!-- <BrandCarNew></BrandCarNew> -->
    <!-- <h1>This is an about page</h1> -->
    <br />
    <!-- <BrandCarPanel></BrandCarPanel> -->
    <!-- <cascader-tree></cascader-tree> -->

    <!-- <indexV3></indexV3> -->
    <!-- <CascaderPanelV3></CascaderPanelV3> -->
    <!-- <BrandCarNewCopy></BrandCarNewCopy> -->
    <!-- <div v-if="true">
      <compareTable></compareTable>
    </div> -->
    <!-- <TimeLine></TimeLine> -->
    <!-- <hotnewsDemo></hotnewsDemo> -->
    <!-- <div style="width:400px;height:300px;background:#ff0;">
      <div style="width:100%;height:100%;background:#f00">table</div>
      <div style="width:100%;height:100%;background:#0ff;float:left">table</div>
    </div> -->
    <!-- <Carousel></Carousel> -->
    <!-- <Carousel2></Carousel2> -->
    <!-- <Select></Select> -->
    <!-- <pdfreader></pdfreader> -->


    <!-- <a-button @click="downloadFile">test</a-button>
    <dynamicTable></dynamicTable> -->
     <!-- <MenuDemo></MenuDemo> -->
    <!-- <FabricDemo></FabricDemo> -->
    <WriteBoard></WriteBoard>
   
  </div>
</template>
<script>
import BrandCar from "@/components/BrandCar";
import BrandCarNew from "@/components/BrandCarNew";
import BrandCarPanel from "@/components/BrandCarPanel";
import CascaderTree from "@/components/cascader";
// import indexV3 from '@/components/cascader/indexV3'
import CascaderPanelV3 from "@/components/cascader/CascaderPanelV3";
import BrandCarNewCopy from "@/components/BrandCarNewCopy";
import compareTable from "@/components/compareTable copy 3";
import YearMonthWeekPicker from "@/components/YearMonthWeekPicker";
import YearMonthWeekRangePicker from "@/components/YearMonthWeekRangePicker";
import complexSearch from "@/components/complexSearch";
import TimeLine from "@/components/TimeLine";
import hotnewsDemo from "@/components/hotnews/hotnewsDemo";
import select from "@/components/select";

import Carousel from "@/components/Carousel";
import Carousel2 from "@/components/Carousel2";
import Select from "../components/select.vue";
import pdfreader from "@/components/pdfreader";
import Pdfreader from "../components/pdfreader.vue";
import axios from  'axios'
import {downloadFile} from '@/utils/downloader'

import dynamicTable from './dynamicTable'
import FabricDemo from "@/components/FabricDemo/index";
import MenuDemo from "@/components/MenuDemo";
import WriteBoard from "@/components/WriteBoard/WriteBoard.vue";


export default {
  components: {
    BrandCar,
    BrandCarNew,
    BrandCarPanel,
    CascaderTree,
    CascaderPanelV3,
    BrandCarNewCopy,
    compareTable,
    YearMonthWeekPicker,
    complexSearch,
    YearMonthWeekRangePicker,
    TimeLine,
    hotnewsDemo,
    Carousel,
    Carousel2,
    Select,
    pdfreader,
    Pdfreader,
    dynamicTable,
    FabricDemo,
    MenuDemo,
    WriteBoard
  },
  data() {
    return {
      selected: {
        a: [],
        "a-1": ["a-1-0", "a-1-1", "a-1-2"],
        "a-1-2-0": ["a-1-0", "a-1-1", "a-1-2"],
        "a-1-2-1": ["a-1-0", "a-1-1", "a-1-2"],
      },
      mapper: {
        123: ["input", "radio", "week"],
        456: ["input", "radio", "select"],
      },
      paramsMaper: {
        123: function (condition) {
          return {
            dateRange: {
              from: condition.week.fromDate,
              to: condition.week.toDate,
            },
          };
        },
        456: function (condition) {
          return {
            name: condition.input,
          };
        },
      },
    };
  },
  methods: {
    submit(condition) {
      var params = (
        this.paramsMaper[this.$route.query.id] ||
        function () {
          return {};
        }
      )(condition);
      console.log("submit", params);
    },
    downloadFile() {
      // 在 node.js 用GET请求获取远程图片
      axios({
        method: "get",
        url: "http://localhost:7230/download",
        responseType: "blob",
      }).then(function (response) {
        downloadFile(response,'111111.xlsx')
        
      });
    },
  },
};
</script>
